import React from 'react';
import { observer } from 'mobx-react-lite';
import { useTranslation } from 'react-i18next';
import { Globe } from 'lucide-react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

export const LanguageChanger = observer(() => {
    const { i18n } = useTranslation();

    return (
        <div className='hidden md:flex'>
            <Select
                onValueChange={(value) => {
                    i18n.changeLanguage(value);
                }}
                defaultValue={i18n.resolvedLanguage}
            >
                <SelectTrigger className='w-[146px]'>
                    <Globe className='text-primary h-5 w-5 mr-2' />
                    <SelectValue placeholder={i18n.resolvedLanguage} />
                </SelectTrigger>
                <SelectContent>
                    <SelectItem value='zh-CN'>中文-简体</SelectItem>
                    <SelectItem value='en-US'>English-US</SelectItem>
                </SelectContent>
            </Select>
        </div>
    );
});
